<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>MOON</title>
<link rel="stylesheet" th:href="@{/moon/css/bootstrap.css}" />
<link rel="stylesheet" th:href="@{/icon/css/font-awesome.min.css}" />
</head>
<body class="bg-b">
	<div class="container-fluid" id="app">
		<div class="row">
			<div class="col text-center bg-danger text-white shadow">mq消息队列</div>
		</div>
		<div class="row mt-2">
			<div class="form-inline">
				<input type="text" class="form-control form-control-sm mr-1" id="name"/>
				<button class="btn btn-sm btn-outline-success mr-1" @click="addToMq()">加入队列</button>
				<button class="btn btn-sm btn-outline-primary mr-1" @click="getForMq()">从队列取出</button>
			</div>
		</div>
	</div>
	<!-- js -->
	<script th:src="@{/moon/js/jquery.js}"></script>
	<script th:src="@{/moon/js/vue.js}"></script>
	<script th:src="@{/layer/layer.js}"></script>
	<script th:inline="javascript">
		//
		var app = new Vue({
			el:"#app",
			data:{
				
			},
			methods:{
				addToMq:function(){
					$.post(
						"/mq/send",
						{
							
							message : $("#name").val()
						},
						function(data){
							layer.msg(data);
						}
					);
				},
				getForMq:function(){
					$.post(
						"/mq/getformq",
						{},
						function(data){
							alert(data);
						}
					);
				}
			}
		})
	</script>
</body>
</html>